<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>inputEx-yui3 - CheckBox Usage</title>

    <link rel="stylesheet" type="text/css" href="css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">
    <script type="text/javascript" src="../js/inputex-loader.js"></script>
</head>

<body>
<p class='demoTitle'>
    <script>document.write(document.title)</script>
</p>

<!-- Example 1 -->
<div class='exampleDiv'>

    <p class="title">Basic CheckBox creation</p>

    <p>Use the following code to create a basic inputEx CheckBox.</p>

    <div class='demoContainer' id='container1'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
            new Y.inputEx.CheckBox().render('#container1');
        </textarea>
    </div>

</div>


<!-- Example 2 -->
<div class='exampleDiv'>

    <p class="title">With a label</p>

    <p>Add the label</p>

    <div class='demoContainer' id='container2'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
            new Y.inputEx.CheckBox({label: 'Do you like inputEx ?', rightLabel: 'Check me !', value: false, description: 'Check this box if you like the inputEx demos'}).render('#container2');
        </textarea>
    </div>

</div>


<!-- Example 3 -->
<div class='exampleDiv'>

    <p class="title">Default returned values</p>

    <p>In its simplest form, the CheckBox returns <i>true</i> if checked, <i>false</i> otherwise.</p>

    <div class='demoContainer' id='container3'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
            var exampleDiv = Y.get('#container3');
            var field1 = new Y.inputEx.CheckBox({rightLabel: 'I return true/false'});
            field1.render(exampleDiv);
            var button = Y.Node.create('<button>getValue()')
            exampleDiv.appendChild(button);
            button.on('click', function() { alert(field1.get('value')); })
        </textarea>
    </div>

</div>


<!-- Example 4 -->
<div class='exampleDiv'>

    <p class="title">Changing the returned values</p>

    <p>You can return different values if needed.</p>

    <div class='demoContainer' id='container4'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
            var exampleDiv = Y.get('#container4');
            var field2 = new Y.inputEx.CheckBox({checkedValue:'Yes',uncheckedValue:'No', rightLabel: 'Do you agree ?', value: 'No'});
            field2.render(exampleDiv);
            var button = Y.Node.create('<button>getValue()')
            exampleDiv.appendChild(button);
            button.on('click', function() { alert(field2.get('value')); })
        </textarea>
    </div>

</div>


<!-- Example 5 -->
<div class='exampleDiv'>

    <p class="title">Updated event</p>

    <p>How to listen to the updated event :</p>

    <div class='demoContainer' id='container5'></div>

    <div class='codeContainer'>
        <textarea name="code" class="JScript" cols="60" rows="1">
            var el = Y.get('#container5');
                    var field = new Y.inputEx.CheckBox();
                    field.render(el);

                    var button1 = Y.Node.create('<button>SetValue with true</button>')
                    var bool = true;
                    el.appendChild(button1);
                    button1.on('click', function() {
                        field.set('value', bool)
                        bool = !bool;
                        button1.set('innerHTML', "SetValue with " + bool);
                    })

                    var logDiv = Y.Node.create('<div>Log :<br/></div>')
                    el.appendChild(logDiv);
                    field.on('field:change', function(e, val) {
                        logDiv.set('innerHTML', logDiv.get('innerHTML') + "Updated at " + (new Date()) + " with value: " + val + "<br />")
                    })
         </textarea>
    </div>

</div>

<script>
    inputEx.YUI({base:'../lib/yui3/',inputExBase:'../'}).use('checkbox', function(Y) {
        //Y.on('event:ready', function() {

        // Example 1
        new Y.inputEx.CheckBox().render('#container1');

        // Example 2
        new Y.inputEx.CheckBox({label: 'Do you like inputEx ?', rightLabel: 'Check me !', value: false, description: 'Check this box if you like the inputEx demos'}).render('#container2');

        // Example 3
        var exampleDiv = Y.get('#container3');
        var field1 = new Y.inputEx.CheckBox({rightLabel: 'I return true/false'});
        field1.render(exampleDiv);
        var button = Y.Node.create('<button>getValue()')
        exampleDiv.appendChild(button);
        button.on('click', function() { alert(field1.get('value')); })

        // Example 4
        var exampleDiv = Y.get('#container4');
        var field2 = new Y.inputEx.CheckBox({checkedValue:'Yes',uncheckedValue:'No', rightLabel: 'Do you agree ?', value: 'No'});
        field2.render(exampleDiv);
        var button = Y.Node.create('<button>getValue()')
        exampleDiv.appendChild(button);
        button.on('click', function() { alert(field2.get('value')); })

        // Example 5
       var el = Y.get('#container5');
        var field = new Y.inputEx.CheckBox();
        field.render(el);

        var button1 = Y.Node.create('<button>SetValue with true</button>')
        var bool = true;
        el.appendChild(button1);
        button1.on('click', function() {
            field.set('value', bool)
            bool = !bool;
            button1.set('innerHTML', "SetValue with " + bool);
        })

        var logDiv = Y.Node.create('<div>Log :<br/></div>')
        el.appendChild(logDiv);
        field.on('field:change', function(e, val) {
            logDiv.set('innerHTML', logDiv.get('innerHTML') + "Updated at " + (new Date()) + " with value: " + val + "<br />")
        })

    });

</script>

<script src="js/dpSyntaxHighlighter.js"></script>
<script language="javascript">
    dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>